<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .svgStl{
            width:40px;
            height:40px;
        }
    </style>
</head>
<body>
<span class="mySpan">this is a book</span>
<button onclick="edit()">修改文字</button>
<div class = "svgStl">
    <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg class="icon" width="45px" height="45.00px" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
        <path fill="#ea986c"
              d="M811.862928 127.601246c-165.88162-165.88162-430.654206-165.88162-596.535825-3.190031-165.88162 165.88162-169.071651 433.844237-3.190031 599.725857l296.672897 299.862928 299.862928-296.672897c165.88162-165.88162 169.071651-433.844237 3.190031-599.725857z m-309.433021 114.841122h178.641744v159.501557h-31.900311v-15.950156H543.900312v105.271029c0 15.950156 6.380062 22.330218 22.330218 22.330218h76.560747c15.950156 0 25.520249-6.380062 28.710281-22.330218 3.190031-12.760125 3.190031-31.900312 6.380062-57.420561 9.570093 3.190031 19.140187 9.570093 31.900311 12.760124-3.190031 28.71028-6.380062 47.850467-6.380062 60.610592-3.190031 25.520249-22.330218 35.090343-54.230529 35.090343h-86.130842c-31.900312 0-47.850467-15.950156-47.850467-51.040498V350.903427h137.17134V274.342679h-143.551402v-31.900311zM703.401869 631.626168h-223.302181c-70.180685 0-118.031153-25.520249-143.551401-76.560747-9.570093 38.280374-19.140187 70.180685-35.090343 92.510903-6.380062-12.760125-12.760125-28.71028-19.140187-41.470405 22.330218-38.280374 35.090343-95.700935 35.090343-175.451713l31.900311 3.190031c0 28.71028-3.190031 54.23053-6.380062 79.750779 9.570093 22.330218 25.520249 41.470405 44.660436 57.42056v-162.691588H285.507788v-31.900312h89.320872v-63.800623H301.457944v-31.900312h73.370716v-63.800623h35.090343v60.610592h73.370717v31.900312h-73.370717v63.800623h82.94081v31.900311h-70.180685v66.990655h66.990654v31.900311h-66.990654v82.94081c19.140187 9.570093 44.660436 12.760125 70.180685 12.760125 70.180685 0 146.741433 0 226.492212-3.190031-9.570093 15.950156-12.760125 25.520249-15.950156 35.090342z"/>
    </svg>
</div>
<div class = "svgStl">
    <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg class="icon" width="45px" height="45.00px" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
        <path fill="#ff0000"
              d="M470.416361 291.488198c19.192449 35.186156 38.384898 60.776088 63.974829 83.167278 28.788673-22.39119 54.378605-51.179864 73.571055-83.167278h-137.545884z"/>
        <path fill="#ff0000"
              d="M774.296803 125.15364C607.962245-41.180918 339.267959-41.180918 172.933402 121.954898 6.598844 288.289456 6.598844 556.983742 169.73466 723.318299l297.482959 300.681701 300.681701-297.482959c169.533299-166.334558 169.533299-435.028843 6.397483-601.363401zM323.274252 211.51966l31.987415 12.794966c-28.788673 54.378605-54.378605 102.359728-76.769796 137.545885h51.179864c9.596224-19.192449 22.39119-41.583639 35.186156-63.97483l31.987415 15.993707c-41.583639 73.571054-76.769796 127.94966-102.359728 166.334558 25.589932-3.198741 54.378605-6.397483 86.366021-12.794966-3.198741 12.794966-3.198741 22.39119-3.198742 31.987415-31.987415 3.198741-73.571054 9.596224-121.552177 19.192449l-6.397483-31.987415c15.993707-19.192449 38.384898-51.179864 67.173572-95.962245-31.987415 3.198741-51.179864 3.198741-67.173572 3.198741l-9.596224-28.788673c28.788673-31.987415 54.378605-86.36602 83.167279-153.539592z m67.173571 371.054014c-38.384898 9.596224-86.36602 19.192449-140.744626 35.186156l-9.596224-35.186156c44.782381-9.596224 95.962245-19.192449 150.34085-35.186157v35.186157z m223.911905 60.776088c-73.571054-25.589932-140.744626-47.981122-198.321973-63.97483l12.794966-31.987415c54.378605 15.993707 121.552177 35.186156 198.321973 57.577347l-12.794966 38.384898z m-147.142109-143.943367l12.794966-28.788674c44.782381 12.794966 89.564762 28.788673 131.148401 44.782381l-15.993707 35.186157c-38.384898-22.39119-83.167279-38.384898-127.94966-51.179864z m195.123231-22.391191c-51.179864-15.993707-92.763503-35.186156-131.148401-60.776088-38.384898 25.589932-83.167279 47.981122-137.545884 67.173571-3.198741-9.596224-9.596224-22.39119-15.993708-31.987415 47.981122-12.794966 89.564762-31.987415 127.94966-57.577347-22.39119-22.39119-41.583639-47.981122-57.577347-76.769795-12.794966 22.39119-28.788673 44.782381-44.782381 67.173571l-22.39119-22.39119c35.186156-47.981122 63.97483-95.962245 83.167279-150.340851l31.987415 9.596225-19.192449 38.384898H639.94966v31.987415c-22.39119 38.384898-51.179864 73.571054-86.366021 102.359727 31.987415 22.39119 73.571054 38.384898 118.353436 44.782381 0 15.993707-3.198741 28.788673-9.596225 38.384898z"/>
    </svg>
</div>
<script>
    function edit() {
        let span = document.getElementsByClassName("mySpan")
        console.log(span)

        span[0].innerHTML = "+1"
    }
</script>
</body>
</html>